<template>
  <div>
    <van-swipe class="my-swipe" indicator-color="blue">
      <van-swipe-item>
        <van-grid square>
          <van-grid-item
            v-for="(item, index) in imgList"
            :key="index + 'ing'"
            :icon="image + item.image_url"
            :text="item.title"
            @click="go"
          />
        </van-grid>
      </van-swipe-item>
      <van-swipe-item>
        <van-grid square>
          <van-grid-item
            v-for="(item, index) in imgList.slice(8,16)"
            :key="index + 'ing'"
            :icon="image + item.image_url"
            :text="item.title"
            @click="go"
          />
        </van-grid>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import { foodlist } from "../api/reques.js";
export default {
  data() {
    return {
      imgList: [],
      image: this.eleimg,
      title:"=美食"
    };
  },
  methods: {
    go(){
      console.log(111);
      this.$router.push('/category'+'?'+"geohash=23.217328,113.304908"+'&'+'title'+this.title)
    }
  },
  async created() {
    let res = await foodlist();
    // console.log(res.data);
    this.imgList = res.data;
  },
};
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  font-size: 20px;
  height: 200px;
  text-align: center;
}

img {
  width: 42px;
  height: 42px;
}
</style>
